<template>
  <div class="app-container customer-div">

    <div style="margin-top: 20px">
      <!--搜索-->
      <el-form :inline="true" :model="params" size="mini" label-width="100px" :rules="rules" ref="form">
        <el-form-item label="品名：" prop="goodsName">
          <el-select v-model="params.goodsName" @change="changeGoodsName">
             <el-option v-for="item in goodsClassList" :value="item" :label="item" :key="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="牌号：">
          <el-select v-model="params.kingGoodsId" filterable placeholder="请选择" clearable multiple>
            <el-option
              v-for="item in goodsList"
              :key="item.kingId"
              :label="item.goodsSn"
              :value="item.kingId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="业务员：">
          <el-select
            style="width: 100px"
            v-model="params.userId"
            filterable
            clearable
          >
            <el-option
              v-for="item in userOptionList"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId"
            >
            </el-option>
          </el-select>
        </el-form-item>

          <el-form-item label="事业部：" >
            <el-select v-model="params.departmentId" filterable placeholder="请选择" clearable multiple>
              <el-option :value="item.divsionDeptId" :label="item.divsionDeptName" v-for="item in divisionList" :key="item.divsionDeptId"></el-option>
            </el-select>
          </el-form-item>

        <el-form-item label="月份：">
          <el-date-picker
            v-model="params.month"
            type="month"
            format="yyyy 年 MM 月"
            value-format="yyyy-MM">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="排序：">
          <el-select v-model="params.sort" placeholder="请选择" clearable>
            <el-option value="up" label="成交量升序"  :key="0"></el-option>
            <el-option value="dn" label="成交量降序"  :key="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            :loading="btnloading"
            @click="handleSearchList()"
            type="primary">
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div id="inquiryChart" style="height:400px;margin-top:20px" v-loading="loading"></div>
    <!--数据列表-->
    <div class="table-container">
      <el-table
        v-loading="loading"
        :data="list"
        border
        style="width: 100%; margin-top: 20px">
        <el-table-column
          prop="orderSn"
          label="订单编码"
          align="center"
          min-width="150">
        </el-table-column>
        <el-table-column
          label="客户名称"
          align="center"
          min-width="180">
          <template slot-scope="scope">
            <div>
              {{scope.row.customerNumber}}
            </div>
            <!--是否有权限-->
            <div v-if="scope.row.isShowCustomerName">{{scope.row.customerName}}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="sapGoodsNo"
          label="商品编码"
          align="center"
          min-width="150">
        </el-table-column>
        <el-table-column
          prop="goodsName"
          label="商品名称"
          align="center"
          min-width="180">
        </el-table-column>
        <el-table-column
          prop="goodsSn"
          label="规格型号"
          align="center"
          min-width="180">
        </el-table-column>
        <el-table-column
          prop="chargeRealName"
          label="业务员"
          align="center"
          min-width="100">
        </el-table-column>
        <el-table-column
          prop="goodsNum"
          label="签订数量"
          align="center"
          min-width="100">
        </el-table-column>
        <el-table-column
          prop="goodsPrice"
          label="签订含税单价"
          align="center"
          min-width="100">
        </el-table-column>
        <el-table-column
          prop="orderPrice"
          label="签订金额"
          align="center"
          min-width="180">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { orderGoodsList,getOrderUsersList,getGoodsClass} from '@/api/partner'
import { inquirySalesVolumeReport} from '@/api/order';
import { divisionDeptList } from '@/api/company';
import {formatDate} from '@/utils/date';
import store from '@/store'
import { mapGetters } from 'vuex'
import echarts from "echarts";

export default {
  name: "purchaseReport",
  data(){
    return{
      roles:store.getters.roles ? store.getters.roles : [],
      params:{
        "month": "", //月份
        "departmentId": [], //事业部ID数组
        "goodsName": "", //品名
        "kingGoodsId": [], //分类厂家
        "userId": "", //业务员ID
        sort:'',
      },
      list:[],
      count:0,
      loading:false,
      goodsList:[],
      divisionList:[],
      userOptionList:[],
      rules:{
        goodsName:[{required: true, message: '此项必填', trigger: 'blur'},],
      },
      btnloading:false,
      chart:null,
      goodsClassList:[]
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),


  },
  created() {
    this.year = new Date().getFullYear();
    this.month = new Date().getMonth();
    let sMonth = this.month + 1;
    sMonth = sMonth < 10 ? '0'+sMonth :sMonth
    this.params.month = this.year+'-'+sMonth

    this.getDivisionDeptList()
    this.getUserOptionList()
    this.getGoodsClassList()
  },
  filters: {
    formatTime(time) {
      let date = new Date(time);
      return formatDate(date, 'yyyy-MM-dd')
    },
  },
  methods:{
    changeGoodsName(){
      this.goodsList = [];
      this.params.kingGoodsId = ''
      this.getgoodsList()
    },
    getGoodsClassList(){
      getGoodsClass().then((res)=>{
        this.goodsClassList = res
      })
    },
    getgoodsList(){
      orderGoodsList({goodsName:this.params.goodsName}).then((res)=>{
        this.goodsList = res.list
      })
    },
    // 配置图表
    initChart(x,y1,y2,y3,y4,min,max) {
      this.chart = echarts.init(document.getElementById("inquiryChart"));
      this.chart.clear();
      const upColor = '#ec0000';
      const upBorderColor = '#8A0000';
      const downColor = '#00da3c';
      const downBorderColor = '#008F28';

      const option =  {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          formatter: function (params) {
            // params 是包含当前点信息的数组
            var result = params[0].seriesName + '<br/>';
            result += '第一次报价: ' + params[0].data[1] + '<br/>';
            result += '最后一次报价: ' + params[0].data[2] + '<br/>';
            result += '最高报价: ' + params[0].data[3] + '<br/>';
            result += '最低报价: ' + params[0].data[4] + '<br/>';
            result += params[1].seriesName + ':'+ params[1].data+'<br/>';
            result += params[2].seriesName + ':'+ params[2].data+'<br/>';
            result += params[3].seriesName + ':'+ params[3].data+'<br/>';
            return result;
          },
        },
        legend: {
          data: ['采购报价K线', '采购报价平均价格', '成交合同平均价格', '合同数量']
        },
        grid: {
          left: '10%',
          right: '10%',
          bottom: '15%'
        },
        xAxis: {
          type: 'category',
          data: x,
        },
        yAxis: [

            {
                type: 'value',
                name:'价格',
                min: min,  //指定最小刻度
                max: max,  //指定最大刻度
                axisLabel: {
                  formatter: '￥{value}'
                },
            },
          {
            type: 'value',
            name:'数量',
            axisLabel: {
              formatter: '{value} 吨'
            }
          },
        ],
        series: [
          {
            name: '采购报价K线',
            type: 'candlestick',
            data: y1,
            itemStyle: {
              color: upColor,
              color0: downColor,
              borderColor: upBorderColor,
              borderColor0: downBorderColor
            },
          },
          {
            name: '采购报价平均价格',
            type: 'line',
            data: y2,
            smooth: true,
            itemStyle: {
              normal: {
                //定义一个list，通过list获取颜色，
                color: '#c7a510'
              }
            },
          },
          {
            name: '成交合同平均价格',
            type: 'line',
            data: y3,
            smooth: true,
            itemStyle: {
              normal: {
                //定义一个list，通过list获取颜色，
                color: '#1d9b00'
              }
            },
          },
          {
            name: '合同数量',
            type: 'line',
            data: y4,
            smooth: true,
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                //定义一个list，通过list获取颜色，
                color: '#7200ff'
              }
            },
          }
        ]
      };
      this.chart.setOption(option);
    },
    //获取员工下拉选项
    getUserOptionList() {
      getOrderUsersList().then((res) => {
        this.userOptionList = res;
      });
    },
    //获取事业部列表
    getDivisionDeptList(){
      divisionDeptList().then((res)=>{
        this.divisionList = res
      })
    },
    handleSearchList(){
      this.params.pageNum = 1;
      this.getListData();
    },

    handleSizeChange(val){
      this.params.pageNum = 1;
      this.params.pageSize = val;
      this.getListData();
    },
    handleCurrentChange(val){
      this.params.pageNum = val;
      this.getListData();
    },

    getListData(){
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.btnloading = true;
          inquirySalesVolumeReport(this.params).then((res)=>{
            this.list = res.orderList;
            this.count = res.total;
            this.loading = false;
            this.btnloading = false;
            this.initChart(res.timeData,res.purchasePriceData,res.purchasePriceAvgData,res.orderPriceData,res.orderGoodsNum,res.mix,res.max)
          }).catch(()=>{
            this.loading = false;
            this.btnloading = false;
          })
        }
      })

    },

  },
}
</script>

<style scoped lang="scss">
.avatar-uploader{
  margin-bottom:10px;
  display: inline-block;
  width:80px;
  height:80px;
  border:1px solid #DCDFE6;
  text-align: center;
  line-height: 80px;
}
</style>
